<template>
    <div>
        <ul v-for="item in likeInfo" :key="item.productId" class='list' @click="goDetail(item.productId)"> 
            <li><img :src="item.proPicUrl" alt=""></li>
            <li class="protitle"><p>{{item.proTitle}}</p></li>
            <li><van-icon name="location-o" />{{item.country}}</li>
            <li>
                <span class="spans iconfont icon-shijian">{{item.routingDat}}天{{item.routingNigth}}晚</span>
                <span class="spans iconfont icon-qian">{{item.amount}}元起</span>
            </li>
        </ul>
    </div>
</template>

<script>
import '@/assets/iconfont1/iconfont.css'
export default {
    data () {
        return {
            likeInfo:[]
        };
    },

    components: {},

    computed: {},
    created(){
        this.$http.get('http://www.51houniao.com/product/product/guessYouLike')
        .then(res=>{
            this.likeInfo=res
            // console.log(res)
        })
    },
    mounted() {},

    methods: {
        goDetail(id){
            this.$router.push('/detail/'+id)
        }
    }
}

</script>
<style scoped>
.list{
    width: 47%;
    box-shadow: 4.95px 4.95px 0 #f2f2f2;
    border: 1px solid #f2f2f2;
    margin: 9.975px 0;
    float:left;
    font-size:12px;
    color:#333;
}
.list li{
    line-height: 2rem;
}
.list img{
    width:90%;
    height:40%;
    margin-left:5%;
}
.list .protitle p{
    margin:0;
    text-align:right;
}
.list span{
    font-size:12px;
}
.list li span{
    display: inline-block;
    margin-left:1rem;
}
</style>